<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">
      {{ pageTitle }}
      <span class="text-subtitle1">{{ pageSubTitle }}</span>
    </div>
    <div class="q-pa-sm shadow-2 q-mb-md">
      <div class="q-gutter-sm">
        <q-btn @click="detailNav.goBackToList" color="primary" icon="arrow_back" outline title="返回" />
        <q-btn :disable="loadingState" :loading="loadingState" @click="loadModelData" color="primary" dense
          icon="refresh" outline title="刷新" />
      </div>
    </div>
    <div class="shadow-2 q-mt-md">
      <q-tabs active-color="primary" align="left" dense indicator-color="primary" v-model="showingTabPanel">
        <q-tab :label="'保税托盘同步' + pageSubTitle" name="lpnDataLog" />
        <q-tab label="保税托盘同步明细" name="lpnDataLogLineList" />
        <q-tab :label="ldsLine.tabTitle.value" name="lpnDataLogLineDetail" v-if="ldsLine.isLineTabDisp.value" />
      </q-tabs>
      <q-separator />
      <q-tab-panels :keep-alive-include="['lpnDataLog','lpnDataLogLineList']" keep-alive v-model="showingTabPanel">
        <q-tab-panel class="q-pa-sm" name="lpnDataLog">
          <form-field-group :model-with-create-update="$d.form" model-id="syncId" title="主要信息">
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>请求序号</span>
                  <easy-input :model-value="$d.form.requestId" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>是否成功</span>
                  <easy-input :model-value="$d.form.isSuccess?'是':'否'" readonly/>
                </div>
                <div class="col-12">
                  <span>错误信息</span>
                  <easy-input :model-value="$d.form.backMsg" readonly type="textarea" :rows="3"/>
                </div>
                <div class="col-12">
                  <span>原始请求数据</span>
                  <easy-input :model-value="$d.form.rawData" readonly type="textarea" :rows="6"/>
                </div>
              </div>
            </div>
          </form-field-group>
        </q-tab-panel>
        <q-tab-panel class="q-pa-none" name="lpnDataLogLineList">
          <div class="row q-col-gutter-sm items-center q-pa-sm">
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div class="col-4 text-right searchbar-label">托盘号</div>
              <div class="col-8">
                <easy-input v-model="lineFpsReq.containerNo" :readonly="lineListDataLoadingState" @focus="fx.ui.select"
                  @keyup.enter="loadLineListData(2)" />
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div>
                <q-btn color="primary" icon="search" label="查询" @click="loadLineListData" class="col-auto" />
              </div>
            </div>
          </div>
          <q-separator />
          <q-table :columns="fpsInfo.columnsInfo" :rows="$d.lineTableData" :loading="lineListDataLoadingState"
            :visible-columns="fpsInfo.visibleColumns" v-model:pagination="fpsInfo.paginationInfo"
            @row-dblclick="(evt,row)=>{ldhLine.lineDetailNav.goViewLine(row.lineId)}" color="primary" dense flat
            row-key="lineId" separator="cell">
            <template v-slot:top="props">
              <q-space />
              <table-col-options-cfg v-model:visible-columns="fpsInfo.visibleColumns"
                v-model:table-columns="fpsInfo.columnsInfo" class="q-mx-sm"
                @update-col-options-for-save="fpsAssist.saveColOptions"></table-col-options-cfg>
              <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"
                class="q-ml-sm" dense flat />
            </template>
            <template v-slot:body-cell-operation="props">
              <q-td :props="props" auto-width>
                <q-btn dense :disable="loadingState" @click="ldhLine.lineDetailNav.goViewLine(props.row.lineId)"
                  color="primary" label="查看" class="btn-in-row q-mr-xs" />
              </q-td>
            </template>
            <template v-slot:no-data>
              <div class="full-width text-center">
                <q-icon name="error_outline" />
                无数据
              </div>
            </template>
            <!--客户端分页-->
            <template v-slot:bottom>
              <paging-bar :loading-state="lineListDataLoadingState" :pageNo="lineFpsReq.pageNo" :pageSize="lineFpsReq.pageSize"
                :totalAmount="fpsInfo.totalAmount" @pagesize-changed="fpsAssist.onPageSizeChanged"
                @go-to-page="fpsNav.gotoPage" />
            </template>
          </q-table>
        </q-tab-panel>
        <q-tab-panel class="q-pa-sm" name="lpnDataLogLineDetail">
          <div class="q-gutter-sm">
            <q-btn @click="ldhLine.lineDetailNav.backToListTab" color="primary" icon="close" outline title="关闭"
              v-if="ldsLine.isLineViewMode.value" />
            <q-btn :disable="lineLoadingState" :loading="lineLoadingState"
              @click="loadLineModelData" color="primary" dense
              icon="refresh" outline title="刷新" v-if="ldsLine.isLineViewOrEditMode.value" />
          </div>
          <form-field-group class="q-mt-sm" :model-with-create-update="ldhLine.lineDetailInfo.lineForm"
            model-id="lineId" title="主要信息">
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>仓库编码</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.warehouseCode" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>托盘号</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.containerCode" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>状态</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.status === 0 ? '禁用' : '启用'" readonly />
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>预留字段信息1</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.userDef1" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>预留字段信息2</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.userDef2" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>预留字段信息3</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.userDef3" readonly />
                </div>
                <div class="col-12">
                  <span>新增原因</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.createReason" readonly type="textarea"
                  :rows="3"/>
                </div>
                <div class="col-12">
                  <span>禁用原因</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.disableReason" readonly type="textarea"
                    :rows="3"/>
                </div>
              </div>
            </div>
          </form-field-group>
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'LpnDataLog'
}
</script>

<script lang="ts" setup>

import {useTitleHelper} from '@njt/foundation/hooks/titleHelper'
import {useDetailHelper} from '@njt/foundation/hooks/detailHelper'
import {reactive, ref} from 'vue'
import { GetLpnMoveLineLogListResp, LpnDataSyncInfo, LpnDataSyncLine, GetLpnDataSyncLineLogListReq } from 'src/defs/sf/lpnDataLog';
import {useLineDetailHelper} from '@njt/foundation/hooks/lineDetailHelper'
import {useFpsHelper} from '@njt/foundation/hooks/fpsHelper'
import {ColumnInfo} from '@njt/foundation/defs/comm'

const pageTitle = '保税托盘同步'
useTitleHelper(pageTitle)
let showingTabPanel = ref('lpnDataLog')

const $d = reactive({
  form: {} as LpnDataSyncInfo,
  lineTableData: [] as LpnDataSyncLine[]
})

let loadingState = ref(false)
const loadModelData = function () {
  loadingState.value = true
  $f.axios
    .get<LpnDataSyncInfo>('/mhlbc/sf/get-lpn-data-sync-log-by-id/' + detailInfo.itemId)
    .then((resp) => {
      $d.form = resp.data
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      loadingState.value = false
    })
}

const {
  detailInfo,
  detailStatus,
  detailNav
}  = useDetailHelper('/sf/lpn-data-log',
  $d.form,
  null,
  '/sf/lpn-data-log',
  '/sf/lpn-data-log/detail',
  null,
  null,
  loadModelData,
  null
)
const {
  pageSubTitle
} = detailStatus

let lineListDataLoadingState = ref(false)

let lineFpsReq: GetLpnDataSyncLineLogListReq = reactive({
  containerNo: null,
  syncId: Number(detailInfo.itemId),
  recordNumber: null,
  pageNo: 1,
  pageSize: 40,
  isDescending: false,
  orderBy: null
})

let columnsInfoLine: ColumnInfo[] = [
  {
    label: '操作',
    name: 'operation',
    field: 'operation',
    align: 'left',
    defOrder: 1,
    sortable: false,
    defVisible: true
  },
  {
    label: '明细序号',
    name: 'lineId',
    field: 'lineId',
    align: 'left',
    defOrder: 2,
    sortable: false,
    defVisible: true
  },
  {
    label: '主档序号',
    name: 'syncId',
    field: 'syncId',
    align: 'left',
    defOrder: 3,
    sortable: false,
    defVisible: false
  },
  {
    label: '仓库编码',
    name: 'warehouseCode',
    field: 'warehouseCode',
    align: 'left',
    defOrder: 4,
    sortable: false,
    defVisible: true
  },
  {
    label: '托盘号',
    name: 'containerCode',
    field: 'containerCode',
    align: 'left',
    defOrder: 5,
    sortable: false,
    defVisible: true
  },
  {
    label: '状态',
    name: 'status',
    field: 'status',
    align: 'left',
    defOrder: 6,
    sortable: false,
    defVisible: true,
    format: (value: number) => value === 0 ? '禁用' : '启用'
  },
  {
    label: '新增原因',
    name: 'createReason',
    field: 'createReason',
    align: 'left',
    defOrder: 7,
    sortable: false,
    defVisible: true
  },
  {
    label: '禁用原因',
    name: 'disableReason',
    field: 'disableReason',
    align: 'left',
    defOrder: 8,
    sortable: false,
    defVisible: true
  },
  {
    label: '预留字段信息1',
    name: 'userDef1',
    field: 'userDef1',
    align: 'left',
    defOrder: 10,
    sortable: false,
    defVisible: true
  },
  {
    label: '预留字段信息2',
    name: 'userDef2',
    field: 'userDef2',
    align: 'left',
    defOrder: 11,
    sortable: false,
    defVisible: true
  },
  {
    label: '预留字段信息3',
    name: 'userDef3',
    field: 'userDef3',
    align: 'left',
    defOrder: 12,
    sortable: false,
    defVisible: true
  },
  {
    label: '创建时间',
    name: 'createDt',
    field: 'createDt',
    align: 'left',
    defOrder: 13,
    sortable: false,
    defVisible: true,
    format: (val: string) => $f.fmt.dtFmtDateOnly(val)
  },
  {
    label: '创建人',
    name: 'createP',
    field: 'createP',
    align: 'left',
    defOrder: 14,
    sortable: false,
    defVisible: true,
    format: (val: string, row: any) => $f.fmt.userDisp(val, row.createPn)
  },
  {
    label: '更新时间',
    name: 'updateDt',
    field: 'updateDt',
    align: 'left',
    defOrder: 16,
    sortable: false,
    defVisible: true,
    format: (val: string) => $f.fmt.dtFmtDateOnly(val)
  },
  {
    label: '更新人',
    name: 'updateP',
    field: 'updateP',
    align: 'left',
    defOrder: 17,
    sortable: false,
    defVisible: true,
    format: (val: string, row: any) => $f.fmt.userDisp(val, row.updatePn)
  },

]

const loadLineListData = function (resetFpsReq?: number) {
  if (resetFpsReq) {
    if (resetFpsReq >= 1) {
      lineFpsReq.pageNo = 1
    }
    if (resetFpsReq >= 2) {
      lineFpsReq.orderBy = ''
      lineFpsReq.isDescending = false
    }
  }
  lineListDataLoadingState.value = true
  $f.axios
    .get<GetLpnMoveLineLogListResp>('/mhlbc/sf/get-lpn-data-sync-log-line-list', {params: lineFpsReq})
    .then((resp) => {
      fpsAssist.handleGenericFpsResp(resp.data)
      $d.lineTableData = resp.data.lpnDataSyncLines
      fpsAssist.saveFpsReq(lineFpsReq)
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      lineListDataLoadingState.value = false
    })
}

const {
  fpsInfo,
  fpsAssist,
  fpsNav
} = useFpsHelper('/sf/lpn-data-log-line',
  null,
  null,
  null,
  lineFpsReq, columnsInfoLine,
  null,
  loadLineListData)


let lineLoadingState = ref(false)
const loadLineModelData = function () {
  lineLoadingState.value = true
  $f.axios
    .get<LpnDataSyncLine>('/mhlbc/sf/get-lpn-data-sync-log-line-by-id/' + String(ldhLine.lineDetailInfo.lineItemId))
    .then((resp) => {
      ldhLine.lineDetailInfo.lineForm = resp.data
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      lineLoadingState.value = false
    })
}

const ldhLine = useLineDetailHelper(
  '保税托盘同步明细',
  'lpnDataLogLineList',
  'lpnDataLogLineDetail',
  {},
  loadLineModelData,
  showingTabPanel,
  null,
  () => {
    // ignore
  },
)

const ldsLine = ldhLine.lineDetailStatus

const fx = $f
</script>